<template>
	<div :class="modelValue ==  data? 'active' : 'unActive'" @click="changeTab(data)">
		<div>{{ name }}</div>
        <div v-if="modelValue ==  data&&isBottomLine" class="tuo"></div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
type Props = {
	data?: any
	name?: string
    modelValue?:number|string
	isBottomLine:boolean
}
let props = withDefaults(defineProps<Props>(), {
	data: {},
    name:'',
    modelValue:0,
	isBottomLine:false
})
let emit = defineEmits(['update:modelValue'])

const changeTab = (item) =>{
    // emit('change',item)
    console.log('点击',item)
    emit('update:modelValue',item)
}
</script>
<style scoped lang="scss">
.unActive {
	display: inline-block;
	cursor: pointer;
	padding: 0 10px;
	box-sizing: border-box;
	height: 39px;
	line-height: 39px;
	border-radius: 8px;
	background: #f0f0f0;
	font-weight: 400;
	font-size: 14px;
	color: #707070;
	text-align: center;
	margin-right: 12px;
}
.active {
	display: inline-block;
	cursor: pointer;
	padding: 0 10px;
	box-sizing: border-box;
	height: 39px;
	line-height: 39px;
	border-radius: 8px;
	background: #ecf3fe;
	font-weight: 400;
	font-size: 14px;
	color: #0052d9;
	text-align: center;
	margin-right: 12px;
	position: relative;
}
.tuo{
	margin-top: 5px;
	width: 30px;
	height: 5px;
	position: absolute;
	bottom: -10;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 6px;
	background-color: #0052D9;
}
</style>
